/**
 * Created by chocolate on 16/4/28.
 */
'use strict'

import React, {
    Component,
    View,
    Navigator,
    Text,
    StyleSheet,
    Image,
    Modal,
    TouchableOpacity,
}from 'react-native';
var Title = require('./Title');

class PickPhoto extends Component{
	constructor(props) {
		super(props);

		this.state = {
			modalVisible:false,
		};
	}

	_onPressReturn(){
	  	this.props.navigator.pop();
	}

	_onPressOption(){
		this._setModalVisible(true);
	}

	_setModalVisible(visible) {
	    this.setState({modalVisible: visible});
	  }

	render(){
		return(
			<View style={styles.container}>
				<Modal
		            animated={true}
		            transparent={true}
		            visible={this.state.modalVisible}
		            onRequestClose={() => {this._setModalVisible(false)}}>
		            <View  ref='modalContainer' style={styles.modalContainer}
		                onStartShouldSetResponderCapture={(e) => {
		        　　　　　　　　const target = e.nativeEvent.target;
		        　　　　　　　　if (target === React.findNodeHandle(this.refs.modalContainer)) {
		        　　　　　　　　　　this._setModalVisible(false);
		        　　　　　　　　}
		                }}>
		               <View style={{backgroundColor:'#eeeeee',}}>
		            		<TouchableOpacity style={styles.button} >
		            			<Text style={styles.buttonText}>拍照</Text>
		            		</TouchableOpacity>
		            		<TouchableOpacity style={[styles.button,{marginTop:1}]}>
		            			<Text style={styles.buttonText}>从手机相册选择</Text>
		            		</TouchableOpacity>
		            		<TouchableOpacity style={[styles.button,{marginTop:1}]}>
		            			<Text style={styles.buttonText}>保存图片</Text>
		            		</TouchableOpacity>
		            		<TouchableOpacity style={[styles.button,{marginTop:10}]} onPress={()=>{this._setModalVisible(false)}}>
		            			<Text style={styles.buttonText}>取消</Text>
		            		</TouchableOpacity>
		               </View>
		            </View>
		        </Modal>

				<Title title={{left:"返回",center:"个人头像",right:"选择",
			                    leftAct:this._onPressReturn.bind(this),rightAct:this._onPressOption.bind(this)}}></Title>
				
				<View style={styles.imageContainer}>
			    	<Image source={require('../../icon/head.png')}/>
			    </View>
	    	</View>	
		)
		
	}	

}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'#eeeeee',
    flex:1,
  },
  modalContainer:{
    flex: 1,
    backgroundColor:'rgba(0, 0, 0, 0.5)',
    justifyContent:'flex-end',
  },
  imageContainer:{
  	flex:1,
  	alignItems:'center',
  	justifyContent:'center',
  },
  image:{
	flex:1,
  },
  button:{
  	alignItems:'center',
  	justifyContent:'center',
  	height:50,
  	flex:1,
  	marginTop:1,
  	backgroundColor:'#FFF'
  },
  buttonText:{
  	textAlign:'center',
  	fontSize:16
  },
 })

module.exports = PickPhoto;